// 首页组件
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function Home() {
  const homePage = document.createElement('div');
  homePage.className = 'min-h-screen flex flex-col';
  
  // 创建页面内容容器
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  
  // 页面内容
  contentContainer.innerHTML = `
    <!-- 英雄区域 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div class="space-y-6">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark leading-tight">
              MSRM3 重构AOT版发布：
              <span class="text-primary">单文件、跨平台、原生性能</span>
              的智能网管
            </h1>
            <p class="text-xl text-gray-600">
              基于 .NET 9 AOT 编译技术 | 支持 Windows/Linux/国产信创 | 启动速度提升 300%
              <br>无需框架依赖，绿色免安装，2.6MB掌控全网
            </p>
            <div class="flex flex-wrap gap-4">
              <button id="download-btn" class="btn-primary">
                <i class="fa fa-download mr-2"></i>下载AOT版 v3.25.920.1
              </button>
              <button id="compare-btn" class="btn-secondary">
                <i class="fa fa-bar-chart mr-2"></i>查看性能对比
              </button>
              <button id="changelog-btn" class="bg-white text-primary border border-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-gray-50">
                <i class="fa fa-history mr-2"></i>查看更新日志
              </button>
            </div>
          </div>
          <div class="relative">
            <div class="bg-white rounded-xl shadow-xl p-4 border border-gray-100">
              <div class="bg-gray-100 rounded-lg p-2 mb-2 flex items-center">
                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                <div class="ml-4 text-sm text-gray-600">MSRM3 Web管理界面</div>
              </div>
              <div class="bg-gray-50 h-80 rounded-lg overflow-hidden flex items-center justify-center">
                <div class="text-center p-4">
                  <i class="fa fa-sitemap text-6xl text-primary/70 mb-4"></i>
                  <p class="text-gray-500">网络拓扑图展示区</p>
                </div>
              </div>
            </div>
            <div class="absolute -right-4 -bottom-4 bg-secondary/10 p-4 rounded-lg shadow-lg">
              <p class="text-secondary font-medium">AOT编译，性能提升300%</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 技术优势对比表 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-center mb-12">技术优势对比</h2>
        <div class="overflow-x-auto">
          <table class="w-full border-collapse">
            <thead>
              <tr class="bg-gray-100">
                <th class="border border-gray-300 px-6 py-4 text-left">特性</th>
                <th class="border border-gray-300 px-6 py-4 text-left">旧版 (.NET Framework)</th>
                <th class="border border-gray-300 px-6 py-4 text-left bg-primary/10 text-primary">重构AOT版 (.NET 9)</th>
              </tr>
            </thead>
            <tbody>
              <tr class="hover:bg-gray-50">
                <td class="border border-gray-300 px-6 py-4 font-medium">运行速度</td>
                <td class="border border-gray-300 px-6 py-4">依赖JIT编译，启动慢</td>
                <td class="border border-gray-300 px-6 py-4 text-primary">AOT编译为原生码，启动快，运行快</td>
              </tr>
              <tr class="hover:bg-gray-50">
                <td class="border border-gray-300 px-6 py-4 font-medium">平台支持</td>
                <td class="border border-gray-300 px-6 py-4">仅Windows</td>
                <td class="border border-gray-300 px-6 py-4 text-primary">Windows + Linux (x64/arm64)</td>
              </tr>
              <tr class="hover:bg-gray-50">
                <td class="border border-gray-300 px-6 py-4 font-medium">系统依赖</td>
                <td class="border border-gray-300 px-6 py-4">需安装.NET Framework</td>
                <td class="border border-gray-300 px-6 py-4 text-primary">无依赖，单文件运行</td>
              </tr>
              <tr class="hover:bg-gray-50">
                <td class="border border-gray-300 px-6 py-4 font-medium">资源占用</td>
                <td class="border border-gray-300 px-6 py-4">较高</td>
                <td class="border border-gray-300 px-6 py-4 text-primary">极低，适合老旧设备</td>
              </tr>
              <tr class="hover:bg-gray-50">
                <td class="border border-gray-300 px-6 py-4 font-medium">国产化支持</td>
                <td class="border border-gray-300 px-6 py-4">无</td>
                <td class="border border-gray-300 px-6 py-4 text-primary">支持银河麒麟、统信UOS等</td>
              </tr>
              <tr class="hover:bg-gray-50">
                <td class="border border-gray-300 px-6 py-4 font-medium">更新状态</td>
                <td class="border border-gray-300 px-6 py-4">已停止更新</td>
                <td class="border border-gray-300 px-6 py-4 text-primary">持续优化开发中</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="mt-6 bg-primary/5 p-4 rounded-lg border border-primary/20">
          <p class="text-center text-primary font-medium">✅ 推荐所有用户升级至重构AOT版</p>
        </div>
      </div>
    </section>
    
    <!-- 核心亮点轮播图 -->
    <section class="section-padding bg-gray-50">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-center mb-12">核心功能亮点</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 亮点1：AOT性能革命 -->
          <div class="feature-card">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-bolt"></i></div>
            <h3 class="text-xl font-bold mb-3">AOT性能革命</h3>
            <p class="text-gray-600">
              采用 .NET 9 AOT 提前编译技术，代码直接转为机器码，启动速度提升3倍，CPU/内存占用降低50%。
            </p>
          </div>
          
          <!-- 亮点2：真正跨平台 -->
          <div class="feature-card">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-globe"></i></div>
            <h3 class="text-xl font-bold mb-3">真正跨平台</h3>
            <p class="text-gray-600">
              支持 Windows 10/11、Linux (Debian/Ubuntu/Rocky等)、国产信创系统（银河麒麟、统信UOS），一次开发，多平台运行。
            </p>
          </div>
          
          <!-- 亮点3：单文件绿色部署 -->
          <div class="feature-card">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-file-o"></i></div>
            <h3 class="text-xl font-bold mb-3">单文件绿色部署</h3>
            <p class="text-gray-600">
              主程序为单一可执行文件，无注册表污染，拷贝即用，迁移方便。Linux需 chmod +x 赋权。
            </p>
          </div>
          
          <!-- 亮点4：内网安全更新 -->
          <div class="feature-card">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-shield"></i></div>
            <h3 class="text-xl font-bold mb-3">内网安全更新</h3>
            <p class="text-gray-600">
              新增"从本地前端更新服务端"功能，内网环境无外网权限也可完成更新，保障网络安全。
            </p>
          </div>
          
          <!-- 亮点5：国产信创，自主可控 -->
          <div class="feature-card">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-flag"></i></div>
            <h3 class="text-xl font-bold mb-3">国产信创，自主可控</h3>
            <p class="text-gray-600">
              兼容主流国产操作系统，满足政企、金融、教育等领域信创替代需求。
            </p>
          </div>
          
          <!-- 亮点6：智能拓扑发现 -->
          <div class="feature-card">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-sitemap"></i></div>
            <h3 class="text-xl font-bold mb-3">智能拓扑发现</h3>
            <p class="text-gray-600">
              支持SNMP自动发现与Ping扫描双模式，自动生成矢量拓扑图，设备连线、端口速率、实时流量一目了然。
            </p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 客户评价 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-center mb-12">客户评价</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 评价1 -->
          <div class="card bg-gray-50 border-l-4 border-primary">
            <p class="italic text-gray-700 mb-4">"以前查一个IP要登录好几台设备，现在MSRM3一点就搞定，效率提升十倍不止！"</p>
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3">
                <i class="fa fa-user"></i>
              </div>
              <div>
                <p class="font-medium">某大型企业网络工程师</p>
              </div>
            </div>
          </div>
          
          <!-- 评价2 -->
          <div class="card bg-gray-50 border-l-4 border-primary">
            <p class="italic text-gray-700 mb-4">"2800个摄像头的故障排查，以前是噩梦，现在用MSRM3的Ping监控和日志分析，半小时全搞定。"</p>
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3">
                <i class="fa fa-user"></i>
              </div>
              <div>
                <p class="font-medium">某安防系统集成商</p>
              </div>
            </div>
          </div>
          
          <!-- 评价3 -->
          <div class="card bg-gray-50 border-l-4 border-primary">
            <p class="italic text-gray-700 mb-4">"绿色小巧，不占资源，功能却比很多商业软件还全，国产软件的骄傲！"</p>
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3">
                <i class="fa fa-user"></i>
              </div>
              <div>
                <p class="font-medium">某政府单位信息中心</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 底部行动召唤 -->
    <section class="bg-gradient-to-r from-primary to-indigo-600 section-padding text-white">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">准备好体验更智能的网络管理了吗？</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto">立即下载MSRM3，开启您的高效运维之旅！</p>
        <button id="cta-download-btn" class="bg-white text-primary px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:bg-gray-100 hover:shadow-xl active:scale-95">
          <i class="fa fa-download mr-2"></i>免费下载 MSRM3
        </button>
      </div>
    </section>
  `;
  
  // 创建导航栏和页脚
  const navbar = Navbar();
  const footer = Footer();
  
  // 添加到页面
  homePage.appendChild(navbar);
  homePage.appendChild(contentContainer);
  homePage.appendChild(footer);
  
  // 添加导航事件监听
  homePage.querySelector('#download-btn').addEventListener('click', () => navigateTo('/download'));
  homePage.querySelector('#compare-btn').addEventListener('click', () => navigateTo('/technology'));
  homePage.querySelector('#changelog-btn').addEventListener('click', () => navigateTo('/changelog'));
  homePage.querySelector('#cta-download-btn').addEventListener('click', () => navigateTo('/download'));
  
  return homePage;
}

export default Home;